<template>
	<div class="main">
		<div class="main-header" style="justify-content: space-between;">
			<!-- <el-button
                v-for="(item, index) in buttons"
                :key="index"
                :type="item.path | formatType"
                :icon="item.icon"
                :disabled="item.path | formatDisabled(selection)"
                @click="tapButton(item)"
                >{{ item.title }}</el-button
            > -->
			<div style="display: flex;">
				<el-input placeholder="请输入内容" style="width: 200px;margin-right: 10px;" v-model="searchParamCp.keyword"
					size="mini" clearable>
				</el-input>
				<!-- payStatus  再加个支付状态  0未支付  1已支付 -->
				<el-select v-model="searchParamCp.payStatus" size="mini" placeholder="请选择支付状态"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in paylist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				<!--结算状态-->
				<el-select v-model="searchParamCp.settle_status" size="mini" placeholder="请选择结算状态"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in settlelist" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				
				<el-select v-model="searchParamCp.payType" size="mini" placeholder="请选择支付方式"
					style="width: 200px;margin-right: 10px;">
					<el-option v-for="(item,index) in paytype" :key="item.id" :label="item.title" :value="item.id">
					</el-option>
				</el-select>
				<div class="timepick" style="margin-right: 10px;width:330px">
					<el-date-picker clearable v-model="searchParamCp.createtime" value-format="yyyy-MM-dd" size="mini"
						type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<el-button type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>
			<el-button type="primary" size="mini" @click="exportExcel">导出</el-button>
		</div>
		<el-table ref="table" class="main-table" :data="memberData" height="100%" border
		 :summary-method="getSummaries" show-summary
			header-cell-class-name="main-table-header" @selection-change="onSelectionChange">
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column width="100px" align="center" label="用户昵称" prop="wxName" />
			<el-table-column width="120px" align="center" label="手机号" prop="mainPhone" />
			<el-table-column align="center" width="160px" label="车牌号" prop="carNo" />
			<el-table-column align="center" width="120px" label="入口" prop="gateName" />
			
			<!-- <el-table-column align="center" width="120px" label="停车场" prop="operatorName" /> -->
			<el-table-column align="center" width="150px" label="金额" prop="payAmount" />
			<!--  out_type 1场内 2车道 3无感 -->
			<el-table-column align="center" label="出场类型" prop="out_type">
				<template slot-scope="{row}">
					<el-tag v-if="row.out_type==1">场内</el-tag>
					<el-tag v-if="row.out_type==2" type="success">场内</el-tag>
					<el-tag v-if="row.out_type==3" type="info">无感</el-tag>
				</template>
			</el-table-column>
			<!--  1 pos余额支付 2 帐户余额支付 3 微信支付 -->
			<el-table-column align="center" label="支付方式" prop="payType" width="100">
				<template slot-scope="{row}">
					<el-tag v-if="row.payType==1">优生活支付</el-tag>
					<el-tag v-if="row.payType==2" type="success">帐户余额支付</el-tag>
					<el-tag v-if="row.payType==0" type="info">微信支付</el-tag>
				</template>
			</el-table-column>
			<!-- payStatus  再加个支付状态  0未支付  1已支付 -->
			<el-table-column align="center" label="支付状态" prop="payStatus">
				<template slot-scope="{row}">
					<el-tag v-if="row.payStatus==0">未支付</el-tag>
					<el-tag v-if="row.payStatus==1" type="success">已支付</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" width="120px" label="优惠金额" prop="couponAmount" />
			<!-- payStatus  结算状态  0未结算  1已结算 -->
			<el-table-column align="center" label="结算状态" prop="settle_status">
				<template slot-scope="{row}">
					<el-tag v-if="row.settle_status==0">未结算</el-tag>
					<el-tag v-if="row.settle_status==1" type="success">已结算</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" width="120px" label="分账失败原因" prop="settle_err_msg" />
			<el-table-column align="center" label="结算时间" prop="settle_time" width="150">
				<template slot-scope="{row}">
					<span v-if="row.settle_time">{{ row.settle_time | formatDate }}</span>
				</template>
			</el-table-column>
			
			<el-table-column align="center" label="进场时间" prop="enterTime" width="150">
				<template slot-scope="{row}">
					{{row.enterTime}}
				</template>
			</el-table-column>
			<el-table-column align="center" label="出场时间" prop="outTime" width="150">
				<template slot-scope="{row}">
					{{row.outTime}}
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作" fixed="right">
				<template slot-scope="{row}">
					<el-button :disabled="row.settle_status==1" type="primary" @click.stop="toselect(row)">结算</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchinfo.page" :page-size="searchinfo.limit" :total="total"
			@current-change="onCurrentChange" layout="total,jumper,prev,pager,next"></el-pagination>
	</div>
</template>

<script>
	import {
		get,
		post
	} from "@/assets/js/http.js";
	import {
		Result
	} from "element-ui";
	export default {
		name: "view-freeca",
		data() {
			return {
				memberData: [],
				searchParamCp: {},
				searchinfo: {
					keyword: '',
					createtime: [],
					payStatus: '',
					settle_status: '',
					payType: '',
					// page: 1,
					// limit: 20,
					total: 0,
				},
				page: 1,
				limit: 20,
				total: 0,
				paylist: ['未支付', '已支付'], //payStatus  再加个支付状态  0未支付  1已支付 
				settlelist: ['未结算', '已结算'], //settle_status  结算状态  0未结算  1已结算 
				paytype: [{
					id: 1,
					title: '优生活支付'
				}, {
					id: 2,
					title: '帐户余额支付'
				}, {
					id: 0,
					title: '微信支付'
				}], // 1 pos余额支付 2 帐户余额支付 3 微信支付
				statistics:{},
			}
		},
		mounted() {
			this.getTableList()
		},
		updated() {
			this.$nextTick(() => {
				this.$refs.table.doLayout()
			})
		},
		methods: {
			getSummaries(param) {
				const {
					columns,
					data
				} = param
				const sums = []
				columns.forEach((column, index) => {
					// console.log(column,index,'column',sums)
					if (index === 0) {
						sums[index] = "统计"
						return
					}
					if (index === 5) {
						sums[index] =  <div style="color: red;"><p>小计(元):{this.statistics.subTotal}</p><p>总计(元):{this.statistics.total}</p></div>
						return
					}
				})
			
				return sums
			},
			searchs() {
				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				console.log(this.searchinfo, '....搜索');
				this.getTableList()
			},
			reset() {
				this.page = 1
				this.searchParamCp = {}
				this.searchinfo = {
					keyword: '',
					createtime: [],
					payType: '',
					payStatus: '',
					settle_status: '',
					// page: 1,
					// limit: 20,
				}
				this.getTableList()
			},
			onSelectionChange(selection) {
				this.selection = selection;
			},
			async getTableList() {
				const data = await get({
					url: '/admin/car.Car/index',
					params: {
						page: this.page,
						limit: this.limit,
						...this.searchinfo,
						...{
							createtime: this.searchinfo.createtime && this.searchinfo.createtime
								.length ? this.searchinfo.createtime.join(' - ') : ''
						}
					},
					loading: true,
				});
				const list = data.list
				this.total = data.total
				this.statistics = data.statistics
				this.memberData = list
			},
			onCurrentChange(index) {
				this.searchinfo.page = index;
				this.$nextTick(() => {
					this.getTableList();
				})

			},
			toselect(row){
				this.$confirm('是否确认结算?', '提示', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					get({
						url:'/admin/car.Car/againSettle',
						params:{
							id:row.id
						},
						successTip: true,
					}).then(res=>{
						this.getTableList()
					})
				}).catch(action => {
					if (action === 'cancel') {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					} else {
				
					}
				
				});
				
			},
			//导出
			async exportExcel() {
				this.$loading()
				let res = await get({
					export: true,
					url: '/admin/car.Car/export',
					params: {
						// page: this.page,
						// limit: this.limit,
						...this.searchinfo,
						...{
							createtime: this.searchinfo.createtime && this.searchinfo.createtime
								.length ? this.searchinfo.createtime.join(' - ') : ''
						}
					}
				})
				let a = document.createElement('a');
				var url = URL.createObjectURL(res);
				a.href = url;
				a.click();
				this.$loading().close()
			},
		}
	}
</script>